
<template >
    <p>这是home页</p>
    <h1>js跳转</h1>
    <button @click="pushStr">push-字符串-跳转</button>
    <button @click="pushPath">push-路径-跳转</button>
    <button @click="pushPathQuery">push-路径-query-跳转</button>
    <button @click="pushName">push-name</button>
    <button @click="pushNameParams">push-命名路由-参数-跳转</button>
    <h1>Vuex</h1>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>
    <button @click="getCount">actions-接口请求</button>
    <button @click="getCountByObj">actions-接口请求-对象方式</button>

    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
    <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>
</template>


<script >
export default{
    methods:{
        pushStr(){
            this.$router.push('/about')
        },
        pushPath(){
            this.$router.push({path:'/about'})
        },
        pushPathQuery(){
            this.$router.push({path:'/about',query:{name:'tom'}})
            
        },
        pushName(){
                this.$router.push({name:'about'})
        },
        pushNameParams(){
            this.$router.push({path:'/about',params:{name:'tom',id:2}})
        },
        updateVuexCount(){
            this.$store.commit('incrementMut',{count:888})
        },
        updateVuexCountByObj(){
            this.$store.commit({type:'incrementMut',count:30})
        },
        getCount(){
            this.$store.dispatch('incrementAct',{count:200})
        },
        getCountByObj(){
            this.$store.dispatch({type:'incrementAct',count:20})
        },
        commitIncreaseA(){
            this.$store.commit('increaseA')
        },
        commitAsyncIncreaseA(){
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
        },
    },
    mounted() {
        console.log("this.$route", this.$route);
    },
}
</script>